<template>
  <el-container>
    <!--查询条件开始-->
    <el-header height="1">
      <el-form ref="queryForm" size="small" :model="parmsValue.query" label-width="160px" class="middle-form">
        <el-row>
          <el-col :span="8">
            <el-form-item prop="prod_name" label="产品代码/名称">
              <el-input v-model="parmsValue.query.prod_name" :clearable="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="prod_mod" label="产品模式">
              <el-select v-model="parmsValue.query.prod_mod" :clearable="true">
                <el-option v-for="(item,index) in dict.prod_model" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="success" size="small" @click="query">查询</el-button>
          <el-button type="info" size="small" @click="resetFields('queryForm')">重置</el-button>
          <el-button type="success" size="small" @click="downloadTemplate">模板下载</el-button>
          <el-button type="success" size="small" @click="showDialog('file')">中债登记编码导入</el-button>
        </el-row>
      </el-form>
    </el-header>
    <!--查询条件结束-->
    <!--列表开始-->
    <el-main>
      <table-pagination
        :table-data="table.debt.tableData"
        :table-header-config="table.tableHeaderConfig"
        :total="table.debt.total"
        :dict-data="dict"
        :page-size="table.debt.limit"
        :now-page="table.debt.nowPage"
        :operation-config="table.operationConfig"
        @current-change="currentChange"
      />
    </el-main>
    <!--列表结束-->
    <!--弹窗开始-->
    <el-dialog title="中债登记编码修改" :visible.sync="parmsValue.updateOpen" :before-close="handleClose">
      <el-form ref="updateForm" size="small" :model="parmsValue.update" label-width="160px" :rules="form.rules">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="prod_code" label="产品代码">
              <el-input v-model="parmsValue.update.prod_code" :clearable="true" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="check_inon" label="产品中债登记编码">
              <el-input v-model="parmsValue.update.check_inon" :clearable="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" size="small" @click="updateCheckInon">提交</el-button>
        <el-button type="info" size="small" @click="closeDialog">取消</el-button>
      </div>
    </el-dialog>
    <!--弹窗结束-->
    <!--导入弹框开始-->
    <el-dialog title="中债登记编码导入" :visible.sync="parmsValue.updateOpen2">
      <el-form ref="updateForm2" size="small" :model="parmsValue.update2" label-width="160px" :rules="form.rules2">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="bonddeal_excel" label="中债登记编码导入">
              <el-upload ref="upload" class="upload-demo" name="bonddeal_excel" accept=".xls" :http-request="importCode" :auto-upload="true" action>
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="closeDialog2">关闭</el-button>
      </div>
    </el-dialog>
    <!--导入弹框结束-->
  </el-container>
</template>

<script>
  import { formItems } from '@/utils/formItems'
  import * as kk from '@/utils/k-utils'
  import request from '@/utils/request'
  import axios from 'axios'

  export default {
    data() {
      return {
        dict: {
          prod_mod: {},
          acct_mod: {},
          run_stat: {}
        },
        table: {
          debt: {
            tableData: [],
            exeid: 'selectProdForBatchCheckInOn',
            total: 100,
            limit: 10,
            nowPage: 1
          },
          tableHeaderConfig: [
            formItems.prodCode, formItems.prodName, formItems.checkInon, formItems.prodMod, formItems.acctMod, formItems.runStat
          ],
          operationConfig: {
            fixed: 'left',
            width: 80,
            operationButton: [
              {
                value: '修改', func: (params) => this.showDialog('update', params)
              }
            ]
          }
        },
        form: {
          rules: {
            prod_code: [{ required: true, message: '产品代码必填', trigger: 'change' }],
            check_inon: [{ required: true, message: '产品中债登记编码必填', trigger: 'change' }]
          },
          rules2: {
            bonddeal_excel: [{ required: true, message: 'excel文件必选', trigger: 'change' }]
          }
        },
        parmsValue: {
          // 查询字段值
          query: {
            prod_name: '', prod_mod: ''
          },
          // 增删改字段值
          update: {
            prod_code: '', check_inon: ''
          },
          update2: {
            bonddeal_excel: ''
          },
          updateOpen: false,
          updateOpen2: false,
          editMod: 'update'
        }
      }
    },
    // 生命周期开始
    beforeMount() {
      this.init()
    },
    // 生命周期结束
    methods: {
      query() {
        this.table.debt.nowPage = 1
        this.loadTable()
      },
      init() {
        const dictReq = []
        const dicts = ['t8_prod_model', 't8_prod_state', 't8_busi_account_type']
        dicts.forEach(key => dictReq.push(request({ url: 'system/base/dict/' + key + '.json', method: 'post', loading: true })))
        axios.all(dictReq).then(axios.spread((prod_mod, run_stat, acct_mod) => {
          this.dict['prod_mod'] = prod_mod
          this.dict['run_stat'] = run_stat
          this.dict['acct_mod'] = acct_mod
          this.loadTable()
        }))
      },
      loadTable() {
        this.table.debt.prod_name = this.parmsValue.query.prod_name
        this.table.debt.prod_mod = this.parmsValue.query.prod_mod
        kk.k_load_table(this, 'debt', formItems.PROD)
      },
      currentChange(index) {
        this.table.debt.nowPage = index
        this.loadTable()
      },
      showDialog(editMod, params = {}) {
        switch (editMod) {
        case 'update':
          this.parmsValue.editMod = 'update'
          this.parmsValue.updateOpen = true
          this.$nextTick(() => {
            Object.assign(this.parmsValue.update, params)
          })
          break
        case 'file':
          this.parmsValue.updateOpen2 = true
        }
      },
      handleClose(done) {
        this.resetFields('updateForm')
        done()
      },
      closeDialog() {
        this.parmsValue.updateOpen = false
        this.resetFields('updateForm')
      },
      closeDialog2() {
        this.parmsValue.updateOpen2 = false
      },
      updateCheckInon() {
        kk.k_update_exeid(formItems.PROD, 'updateCheckInOn', this.parmsValue.update).then(resp => {
          if (resp.success) {
            this.closeDialog()
            this.loadTable()
          }
        })
      },
      resetFields(form) {
        this.$refs[form].resetFields()
      },
      /**
       * axios导入Excel文件
       * @param fileObj
       */
      importCode(fileObj) {
        const formData = new FormData()
        formData.set('bonddeal_excel', fileObj.file)
        request.post(formItems.PROD + '/importProdInfoExcel', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        })
      },
      /**
       * axios下载Excel文件
       */
      downloadTemplate() {
        request.post(formItems.PROD + '/downloadProdTemplate', {},
                     { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'arraybuffer' }
        ).then(file => {
          const blob = new Blob(
            [file],
            {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=ISO-8859-1'
            })
          const downloadElement = document.createElement('a')
          const href = window.URL.createObjectURL(blob)
          downloadElement.href = href
          downloadElement.download = '产品登记编码导入模板'
          document.body.appendChild(downloadElement)
          downloadElement.click()
          document.body.removeChild(downloadElement)
          window.URL.revokeObjectURL(href)
        })
      }
    }
  }
</script>
